<!--需要使用组件实例ref属性只能在父组件定义ref属性，使用this.$refs.<父组件ref属性名>.$children[0]获取-->
<template>
  <el-table v-bind="$attrs" v-on="$listeners" :ref="name" :data="data" :stripe="stripe">
    <slot name="front"></slot>

    <table-column
      v-for="(column, index) in renderColumns"
      :key="index"
      :effect="effect"
      :placement="placement"
      :column="column"
    ></table-column>

    <slot></slot>
  </el-table>
</template>
<script>
import { cloneDeep } from '@vimi/utils-tool'
import TableColumn from './TableColumn'

export default {
  name: 'CTable',
  components: {
    TableColumn,
  },
  props: {
    columns: {
      type: Array,
      required: true,
      default() {
        return []
      },
    },
    data: {
      required: true,
      default: () => [],
    },
    name: {
      type: String,
    },
    effect: {
      type: String,
      default: 'light',
    },
    placement: {
      type: String,
      default: 'bottom-start',
    },
  },
  data() {
    return {}
  },
  computed: {
    // 过滤掉不需要显示的列
    renderColumns() {
      const columns = cloneDeep(this.columns)
      return this.getRenderColumns(columns)
    },
    // 默认带斑马纹
    stripe() {
      return this.$attrs.stripe !== false
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getRenderColumns(columns) {
      return columns
        .filter(item => !item.hidden)
        .map(item => {
          item.scopedSlot = item.slot ? this.$scopedSlots[item.slot] : null

          if (item.columns && item.columns.length) {
            item.columns = this.getRenderColumns(item.columns)
          }

          return item
        })
    },
  },
}
</script>
<style scoped></style>
